<template>
	<!--pages/category/category.wxml-->
	<view class="category-outer-wrapper">
		<!-- 头部搜索区 -->
		<view class="search-bar">
			<view class="search-box" @tap="toSearchPage">
				<image src="/static/images/icon/search.png" class="search-img"></image>
				<text class="sear-input">{{i18n.searchGoods}}</text>
			</view>
		</view>
		<!-- 滚动内容区 -->
		<view class="main-wrapper">
			<!-- 左侧菜单start -->
			<scroll-view scroll-y="true" class="left-menu">
				<block v-for="(item, index) in categoryList" :key="index">
					<view :class="'menu-item ' + (selIndex==index?'active':'')" :data-index="index"
						:data-id="item.categoryId" @tap="onMenuTab">
						<text class="menu-text">{{item.categoryName}}</text>
					</view>
				</block>
			</scroll-view>
			<!-- 左侧菜单end -->

			<!-- 右侧内容start -->
			<scroll-view scroll-y="true" class="right-content">
				<view class="adver-map">
					<view class="item-a">
						<image :src="categoryImg" mode="widthFix"></image>
					</view>
				</view>

				<block v-for="(item, subCateIndex) in subCategoryList" :key="subCateIndex">
					<view class="sub-category">
						<view class="sub-category-con">
							<view class="sub-cate-title">
								<text class="sub-cate-text">{{item.categoryName}}</text>
								<text class="view-all" v-if="item.categories" @tap="toCatePage" data-type="all"
									:data-subcateindex="subCateIndex"
									:data-parentid="item.categoryId">{{i18n.viewAll}}</text>
							</view>
							<view class="th-cate-con" v-if="item.categories">
								<block v-for="(thCateItem, categoryId) in item.categories" :key="categoryId">
									<view class="sub-category-item" @tap="toCatePage"
										:data-categoryid="thCateItem.categoryId" :data-parentid="item.categoryId">
										<image :src="thCateItem.pic" mode="widthFix" class="sub-category-item-pic">
										</image>
										<text>{{thCateItem.categoryName}}</text>
									</view>
								</block>
							</view>
							<view class="empty-tips" v-else>
								{{i18n.noData}}
							</view>
						</view>
					</view>
				</block>

			</scroll-view>
			<!-- 右侧内容end -->
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
	// pages/category/category.js
	var http = require("../../utils/http.js");
	var config = require("../../utils/config.js");
	var util = require("../../utils/util.js");

	export default {
		data() {
			return {
				selIndex: 0,
				categoryList: [],
				categoryImg: '',
				subCategoryList: [],
				parentId: ""
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			var ths = this; //加载分类列表

			var params = {
				url: "/category/categoryInfo",
				method: "GET",
				data: {
					parentId: ''
				},
				callBack: function(res) {
					ths.setData({
						categoryImg: res[0].pic,
						categoryList: res,
					});
					if (ths.parentId == '') {
						ths.getProdList(res[0].categoryId);
					} else {
						ths.getProdList(res[ths.selIndex].categoryId);
					}

				}
			};
			http.request(params);

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 加载导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.classifiedGoods
			});

			util.transTabbar()

			http.getCartCount()

			// #ifndef H5
			var logData = uni.getStorageSync('flowAnalysisLogDto')
			uni.setStorageSync('step', uni.getStorageSync('step') / 1 + 1)
			if (logData && logData.pageId != 6) {
				logData.pageId = 6
				logData.step = uni.getStorageSync('step')
				uni.setStorageSync('flowAnalysisLogDto', logData)
				http.saveLog(logData, 1)
			}
			// #endif
		},
		methods: {
			/**
			 * 分类点击事件，获取子分类
			 */
			onMenuTab: function(e) {
				util.tapLog(3)
				// console.log(e);
				var id = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index; // this.getProdList(id);

				this.getProdList(this.categoryList[index].categoryId);
				this.setData({
					categoryImg: this.categoryList[index].pic,
					selIndex: index
				});
			},
			// 跳转搜索页
			toSearchPage: function() {
				util.tapLog(3)
				uni.navigateTo({
					url: '/pages/search-page/search-page'
				});
			},

			getProdList(categoryId) {
				this.setData({
					parentId: categoryId
				}); //加载子分类列表

				var params = {
					url: "/category/categoryInfo",
					method: "GET",
					data: {
						parentId: categoryId
					},
					callBack: res => {
						this.setData({
							subCategoryList: res
						});
					}
				};
				http.request(params);
			},

			// 跳转子分类商品页面
			toCatePage: function(e) {
				util.tapLog(3)
				const {
					type,
					parentid,
					categoryid,
					subcateindex
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url: `/pages/sub-category/sub-category?parentId=${parentid}&categoryId=${type == 'all' ? this.subCategoryList[subcateindex].categories[0].categoryId : categoryid}`
				});
			}
		}
	};
</script>
<style lang="scss">
	.category-outer-wrapper {
		display: flex;
		flex-direction: row;
		height: 100%;
		/* 搜索栏 */

		.search-bar {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			color: #777;
			background: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
			z-index: 3;
			padding: 20rpx 0;

			.search-box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				background: #f7f7f7;
				z-index: 999;
				width: 92%;
				border-radius: 50rpx;
				text-align: center;
				margin: auto;


				.sear-input {
					font-size: 28rpx;
				}

				.search-img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main-wrapper {
			position: fixed;
			display: flex;
			overflow: hidden;
			margin-top: 100rpx;
			height: calc(100% - 100rpx);
			width: 100%;




			/* 左侧菜单栏 */

			.left-menu {
				width: 25%;
				padding-bottom: 120rpx;
				box-sizing: border-box;
				background-color: #f5f6f7;
				overflow: scroll;
				z-index: 2;


				.menu-item {
					position: relative;
					display: -webkit-box;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;
					padding-top: 4rpx;
					padding-left: 20rpx;
					height: 90rpx;
					max-width: 200rpx;
					text-align: center;
					border-bottom: 2rpx silid #e3e3e3;
					color: #777;
					font-size: 28rpx;

					&.active {
						position: relative;
						color: #E43130;
						font-size: 28rpx;
						font-weight: bold;
						background: #fff;
					}

					&.active:before {
						content: "";
						position: absolute;
						left: 0;
						top: 29rpx;
						width: 8rpx;
						height: 32rpx;
						background: #E43130;
					}

					.menu-text {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}


			/* 右侧商品栏 */

			.right-content {
				padding-bottom: 120rpx;
				width: 75%;
				box-sizing: border-box;
				background-color: #fff;
				z-index: 1;

				.adver-map {
					position: relative;
					margin: 30rpx 20rpx 0;
					width: auto;
					box-sizing: border-box;
					overflow: hidden;

					.item-a {
						display: block;
						width: 100%;
						height: 160rpx;
						font-size: 0;

						image {
							max-width: 100%;
							max-height: 100%;
							width: 1220px;
						}
					}
				}

				.sub-category {
					/* 二级分类 */
					.sub-category-con {
						margin: 20rpx;

						.sub-cate-title {
							display: flex;
							align-items: center;
							font-weight: 800;

							.view-all {
								color: #999;
								font-weight: normal;
								font-size: 22rpx;
							}

							.sub-cate-text {
								flex: 1;
								font-size: 28rpx;
							}
						}

						.th-cate-con {
							display: flex;
							flex-wrap: wrap;

							.sub-category-item {
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								width: 33.33%;
								align-items: center;
							}

							.sub-category-item .sub-category-item-pic {
								width: 120rpx !important;
								height: 120rpx !important;
								padding-bottom: 10rpx;
							}

							.sub-category-item text {
								font-size: 25rpx;
							}
						}

						.empty-tips {
							font-size: 26rpx;
							color: #aaa;
							margin: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
